<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>物联利浪-点餐系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 加载 Bootstrap -->
    <link href="<%=path%>/resource/diancan/css/vendor/bootstrap.min.css" rel="stylesheet">

    <!-- 加载 Flat UI -->
    <link href="<%=path%>/resource/diancan/css/flat-ui.css" rel="stylesheet">
    <link href="<%=path%>/resource/diancan/css/my.css" rel="stylesheet">

    <link rel="shortcut icon" href="<%=path%>/resource/diancan/img/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="<%=path%>/resource/diancan/js/vendor/html5shiv.js"></script>
      <script src="<%=path%>/resource/diancan/js/vendor/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	
  	<!-- 主体开始 -->
    <div class="container body main-body">
    	<div class="row" id="error_alert">
    			<div class="alert alert-danger alert-dismissible" role="alert">
  					<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  					<strong>错误!</strong> ${error }
				</div>
    	</div>
    	<div class="row">
    		<h1 class="demo-logo">
         		<span class="logo"></span>
          		物联利浪<small>点餐系统</small>
        	</h1>
    	</div>
    	<div class="row">
        <div class="col-xs-12 col-sm-6 candan">
        	<div class="col-xs-12 col-sm-12 miaoshu">
    			<div class="demo-content">
	      		<h5><span class="demo-heading-note">商家</span>${business.name}</h5>
	      		<h5><span class="demo-heading-note">电话</span>${business.phone}</h5>
      			</div>
      			<div class="miaoshu-right">
                <div class="form-group search-input">
                  <div class="input-group">
                    <input class="form-control" id="search_input" type="search" placeholder="Search">
                    <span class="input-group-btn">
                    <button class="btn"><span class="fui-search"></span></button></span>
                  </div>
                </div>
      			<div class="btn-group">
            		<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">
						<span class="fui-user"></span>${session.diancanren.name }<span class="caret"></span>
					</button>
            		<ul role="menu" class="dropdown-menu">
              			<li><a href="<%=path %>/diancan/giveUpOrder">放弃点餐</a></li>
              			<li><a href="<%=path %>/diancan/loginOut">退出</a></li>
            		</ul>
          		</div>
          		</div>
    		</div>
        	<div class="col-xs-12 candan-head col-sm-6">
        		<div class="row">
        			<div class="col-xs-4">菜名</div>
        			<div class="col-xs-5">价格（份）</div>
        			<div class="col-xs-3">选择</div>
        		</div>
        	</div>
        	<div class="col-xs-12 candan-head col-sm-6">
        		<div class="row">
        			<div class="col-xs-4">菜名</div>
        			<div class="col-xs-5">价格（份）</div>
        			<div class="col-xs-3">选择</div>
        		</div>
        	</div>
        	<form action="<%=path %>/diancan/order" method="post">
        	<input  name="foodId" value="" type="hidden"/>
        	<c:forEach items="${business.foods}" var="food">
        	<div class="col-xs-12 col-sm-6 food-div">
        		<div class="row">
        			<div class="col-xs-4 food-name">${food.name }</div>
        			<div class="col-xs-5">${food.price }元</div>
        			<div class="col-xs-3">
					<%-- <label class="radio">
            			<input type="radio" name="foodId" value="${food.id }" ${myOrder!=null&&food.id==myOrder.food.id?'checked':''} data-toggle="radio" class="custom-radio">
            			<span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
          			</label> --%>
          			<c:if test="${myOrder!=null&&food.id==myOrder.food.id}">
          				<button type="button" class="btn btn-block btn-lg btn-danger queren">已选择</button>
          			</c:if>
          			<c:if test="${(myOrder!=null&&food.id==myOrder.food.id)==false}">
          				<button type="button" value="${food.id }" class="btn btn-block btn-lg btn-info queren">选择</button>
          			</c:if>
					</div>
        		</div>
        	</div>
        	</c:forEach>
        	<!-- <div class="col-xs-12 col-sm-12">
        		<div class="row">
        			<button type="submit" class="btn btn-block btn-lg btn-info">确定选择</button>
        		</div>
        	</div> -->
        	</form>
        </div> <!-- /sliders -->
		
		<div class="col-sm-1"></div>
        <div class="col-xs-12 col-sm-5  candan">
        	<div class="col-xs-12 col-sm-12 demo-content miaoshu">
    			<h5>本次点餐名单</h5>
    			<h5 class="font-red"><span class="demo-heading-note">点餐倒计时</span>
					<span class="time-item">
						<!-- <span id="day_show">0天</span> -->
						<strong id="hour_show">0时</strong>
						<strong id="minute_show">0分</strong>
						<strong id="second_show">0秒</strong>
					</span>
				</h5>
    		</div>
    		<div class="col-xs-12 order-head">
        		<div class="row">
        			<div class="col-xs-4">点餐人</div>
        			<div class="col-xs-4">菜名</div>
        			<div class="col-xs-4">价格（份）</div>
        		</div>
        	</div>
        	<c:forEach items="${bout.orders}" var="order">
        	<div class="col-xs-12">
        		<div class="row ${session.diancanren.id.equals(order.user.id)?'my-order':''}">
        			<div class="col-xs-4">${order.user.name }</div>
        			<div class="col-xs-4">${order.food.name }</div>
        			<div class="col-xs-4">${order.food.price }元</div>
        		</div>
        	</div>
        	</c:forEach>
        </div>
        
        <div class="col-sm-1" id="tongji_zanwei"></div>
        <div class="col-xs-12 col-sm-5  candan">
        	<div class="col-xs-12 col-sm-12 demo-content miaoshu">
    			<h5>订单统计</h5>
    		</div>
    		<div class="col-xs-12 order-head">
        		<div class="row">
        			<div class="col-xs-4">菜名</div>
        			<div class="col-xs-4">数量</div>
        			<div class="col-xs-4">总价</div>
        		</div>
        	</div>
        	<c:forEach items="${orderStatistics}" var="os">
        	<div class="col-xs-12">
        		<div class="row">
        			<div class="col-xs-4">${os.key }</div>
        			<div class="col-xs-4">${os.value.num }份</div>
        			<div class="col-xs-4">${os.value.price }元</div>
        		</div>
        	</div>
        	</c:forEach>
        	<div class="col-xs-12">
        		<div class="row">
        			<div class="col-xs-4">总计</div>
        			<div class="col-xs-4">${allNum }份</div>
        			<div class="col-xs-4">${allPrice }元</div>
        		</div>
        	</div>
        </div>
      </div>
    </div>

	<div class="container footer">
        <div class="row">
        	<h4 class="center">©2014 物联利浪科技 研发部技术支持</h4>
        </div>
      </div>
    <!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
    <script src="<%=path%>/resource/diancan/js/vendor/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!--<script src="<%=path%>/resource/diancan/js/flat-ui-pro.min.js"></script>-->
    <script src="<%=path%>/resource/diancan/js/flat-ui.min.js"></script>
	<script type="text/javascript">
	//网页倒计时
	function timer(intDiff) {
		window.setInterval(function() {
			var day = 0,
				hour = 0,
				minute = 0,
				second = 0; //时间默认值
			if (intDiff > 0) {
				day = Math.floor(intDiff / (60 * 60 * 24));
				hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
				minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
				second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
			}
			if (minute <= 9) minute = '0' + minute;
			if (second <= 9) second = '0' + second;
			$('#day_show').html(day + "天");
			$('#hour_show').html('<s id="h"></s>' + hour + '时');
			$('#minute_show').html('<s></s>' + minute + '分');
			$('#second_show').html('<s></s>' + second + '秒');
			intDiff--;
		}, 1000);
	}
		$(function(){
			if("${error}" == ""){
				$("#error_alert").hide();
			}
			//倒计时
			timer("${countdown}");
			
			$(".queren").click(function(){
				var foodId = $(this).attr("value");
				$("input[name=foodId]").val(foodId);
				$("form").submit();
			});
			
			//及时查询
			if (window.addEventListener) { 
				$('#search_input').on('input', function() {
					var search = $(this).val();
					
					if(search == null || search == ""){
						$(".food-div").show();
						$("#tongji_zanwei").attr("class","col-sm-1");
						return false;
					}
					var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
					if(!reg.test(search)){//是汉字才处理
						return false;
					}
					$.each($(".food-name"),function(i,v){
						if($(v).html().indexOf(search)>-1){
							$(v).closest(".food-div").show();
						}else{
							$(v).closest(".food-div").hide();
						}
					});
					console.log($(".food-div:hidden").length);
					if($(".food-div").length == $(".food-div:hidden").length){
						$("#tongji_zanwei").attr("class","col-sm-7");
					}else{
						$("#tongji_zanwei").attr("class","col-sm-1");
					}
				});
			}
		});
	</script>
  </body>
</html>
